<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_class与style绑定</title>
  <style>
    .fontRed {
      color: red;
    }
    .bgBlue {
      background: blue;
    }
    .font20 {
      font-size: 20px;
    }
  </style>
</head>
<body>

<!--
1. 理解
  在应用界面中, 某个(些)元素的样式是变化的
  class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'；指令也可以与普通的 class attribute 共存
  xxx是字符串
  xxx是对象
  xxx是数组
3. style绑定
  :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  其中activeColor/fontSize是data属性
-->

<div id="demo">
  <h2>1. class绑定: :class='xxx'</h2>
  <ul :class="myClass">
    <li>xxx是字符串</li>
    <li>:class="myClass"</li>
    <li>myClass={{myClass}}</li>
  </ul>
  <ul :class="{fontRed: hasClassA, bgBlue: hasClassB}">
    <li>xxx是对象</li>
    <li>:class="{fontRed: hasClassA, bgBlue: hasClassB}"</li>
    <li>hasClassA={{hasClassA}};hasClassB={{hasClassB}}</li>
  </ul>
  <ul :class="['fontRed', 'bgBlue']">
    <li>xxx是数组</li>
    <li>:class="['fontRed', 'bgBlue']"</li>
<!--    <li>:class="[myClass, fontSize]"</li>-->
  </ul>

  <h2>2. style绑定</h2>
  <ul :style="{color:activeColor, fontSize}">
    <li>:style="{color:activeColor, fontSize}"</li>
    <li>activeColor={{activeColor}};fontSize={{fontSize}}</li>
  </ul>

  <button @click="update">更新</button>

</div>

<script type="text/javascript" src="../public/cdn/vue/2.6.10/vue.min.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      myClass: 'fontRed',
      hasClassA: false,
      hasClassB: true,
      activeColor: 'red',
      fontSize: '20px'
    },

    methods: {
      update () {
        this.myClass = this.myClass === 'bgBlue' ? 'fontRed' : 'bgBlue'
        this.hasClassA = !this.hasClassA
        this.hasClassB = !this.hasClassB
        this.activeColor = 'gray'
        this.fontSize = '15px'
      }
    }
  })
</script>
</body>
</html>